import _ from 'lodash';
<!--
 * @Description: 
 * @Date: 2024-01-15 14:04:23
 * @LastEditTime: 2024-02-27 09:56:34
-->
<template>
  <div class="manageInfo">
    <el-row :gutter="10" style="margin-bottom: 10px; height: 450px">
      <el-col :sm="24" :md="18" :lg="18" style="height: 100%">
        <el-card class="box-card">
          <div class="manageInfo-message">
            <p class="manageInfo-title">代表信息</p>
            <div class="manageInfo-content">
              <div class="manageInfo-content-top">
                <img :src="form.avatar" />
                <el-descriptions class="top-right" :column="2">
                  <el-descriptions-item label="姓名">{{
                    form.userName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="民族">
                    <dict-tag
                      :options="dict.type.nationality"
                      :value="form.nationality"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="生日">
                    {{ form.birthday }}
                  </el-descriptions-item>
                  <el-descriptions-item label="籍贯">
                    {{ form.address }}
                  </el-descriptions-item>
                  <el-descriptions-item label="性别">
                    <dict-tag
                      :options="dict.type.sys_user_sex"
                      :value="form.sex"
                  /></el-descriptions-item>
                  <el-descriptions-item label="学历">
                    <dict-tag
                      :options="dict.type.sys_education_status"
                      :value="form.qualification"
                  /></el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="manageInfo-content-bottom">
                <el-descriptions :column="2">
                  <el-descriptions-item label="代表证号">{{
                    form.num
                  }}</el-descriptions-item>
                  <el-descriptions-item label="参加工作时间">{{
                    form.firstTime
                  }}</el-descriptions-item>
                  <el-descriptions-item label="通讯地址">
                    {{ form.homeAddress }}
                  </el-descriptions-item>
                  <el-descriptions-item label="工作单位及职务">
                    {{ form.post }}</el-descriptions-item
                  >
                  <el-descriptions-item label="是否常务委员会委员">
                    <dict-tag
                      :options="dict.type.sys_yes_no"
                      :value="form.isCommittee"
                      v-if="form.isCommittee"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="办公电话">
                    {{ form.workPhone }}</el-descriptions-item
                  >
                  <el-descriptions-item label="手机号码">
                    {{ form.phone }}</el-descriptions-item
                  >
                  <el-descriptions-item label="星级">
                    <el-rate disabled :value="3"></el-rate
                  ></el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col
        :sm="24"
        :md="6"
        :lg="6"
        style="height: 100%; flex-direction: column; display: flex; gap: 10px"
      >
        <el-card class="box-card" style="height: 150px">
          <div>
            <p class="manageInfo-title">联系选民</p>
          </div>
        </el-card>
        <el-card class="box-card" style="flex: 1">
          <div>
            <p class="manageInfo-title">履职承诺</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :sm="24" :md="12" :lg="12" style="height: 200px">
        <el-card class="box-card">
          <div>
            <p class="manageInfo-title">代表建议</p>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :md="12" :lg="12" style="height: 200px">
        <el-card class="box-card">
          <div>
            <p class="manageInfo-title">代表履职</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  addManage,
  addManageList,
  updateManageList,
  getManageItem,
  deleteManage,
} from "@/api/dbxx/dbxxManage";
export default {
  props: ["userId"],
  dicts: ["sys_yes_no", "nationality", "sys_user_sex", "sys_education_status"],
  data() {
    return {
      form: {},
    };
  },
  created() {
    if (this.$route.name == "manageInfo") {
      let id = this.$route.params.userId;
      this.getInfo(id);
    }
  },
  methods: {
    getInfo(id) {
      if (id === undefined) return;
      getManageItem(id).then((response) => {
        this.form = response.data;
        this.form.avatar = process.env.VUE_APP_BASE_API + this.form.avatar;
      });
    },
  },
  watch: {
    userId: {
      handler: function (val) {
        this.getInfo(val);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.manageInfo {
  padding: 20px;
  height: 100%;
  overflow: auto;
  background: #fff;
  &-content {
    padding: 20px 30px;
    &-top {
      display: flex;
      justify-content: space-between;

      img {
        max-width: 100px;
        height: 130px;
        object-fit: cover;
      }
      .top-right {
        width: 60%;
      }
    }
  }
  &-title {
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    margin: 0;
  }
}
::v-deep
  .el-descriptions__body
  .el-descriptions__table
  .el-descriptions-item__cell {
  line-height: 40px;
}
::v-deep .el-card__body {
  height: 100%;
  padding: 0;
}
::v-deep .el-descriptions-item__container .el-descriptions-item__content {
  align-items: center;
}
.box-card {
  height: 100%;
}
</style>
